<template>
   <view class="map">
	   <view class="title">地址详情</view>
	   <view class="map-box">
		   <map id="map1" ref="map1" :longitude="info.lng" :latitude="info.lat" :markers="covers"></map>
	   </view>
	   <view class="address-box">
	   	<view class="list-item">
	   		<view class="posi">
				<image src="../../static/img/1/icon-dingwei@2x.png" mode="aspectFit"></image>
			</view>
			<view class="storeInfo">
				<view class="storeName">{{info.name}}</view>
				<view class="storeDesc">{{info.address}}</view>
			</view>
			<view class="phone" @click="takePhone">
				<uni-icons type="phone"></uni-icons>
			</view>
	   	</view>
	   </view>
   </view>
</template>

<script>
    export default {
        name: "",
        components:{
            
        },
        data(){
            return {
                info:{},
				mapcontext:null,
				covers:[]
            }
        },
		onReady() {
			// this.mapcontext = uni.createMapContext('map1', this)
		},
		onLoad(options) {
			let that = this
			this.info = JSON.parse(options.address)
			let temp = {
				longitude:this.info.lng,
				latitude:this.info.lat
			}
			this.covers.push(temp)
			
		},
		methods:{
			takePhone(){
				let that = this
				uni.makePhoneCall({
				    phoneNumber: that.info.phone //仅为示例
				});
			}
		}
      

    }
</script>

<style scoped lang="less">
	page{
		background: #F6F6F6;
	}
	.map{
		display: flex;
		flex-direction: column;
		.title{
			width: 100%;
			height: 103upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 23upx;
			color: #999;
			border-bottom: 10upx solid #fff;
		}
		.map-box{
			width: 100%;
			height: 800upx;
			map{
				width: 100%;
				height: 100%;
			}
			border-bottom: 10upx solid #fff;
		}
		.address-box {
			width: 100%;
			display: flex;
			flex-direction: column;
		
			.list-item {
				width: 100%;
				height: 130upx;
				margin-top: 10upx;
				background: rgba(255, 255, 255, 1);
				padding: 0 20upx 0 40upx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.posi{
					// width: 20%;
					margin-right: 20upx;
					image{
						width: 30upx;
						height: 36upx;
					}
				}
				.storeInfo {
					width: 85%;
					height: 100%;
					display: flex;
					// align-items: center;
					justify-content: center;
					flex-direction: column;
					// margin-right: 200upx;
					.storeName {
						font-size: 21upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
		
					}
		
					.storeDesc {
						font-size: 21upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(187, 187, 187, 1);
					}
				}
		
				.position {
					height: 100%;
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					image {
						width: 30upx;
						height: 36upx;
					}
				}
			}
		}
	}
</style>
